<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>logo</title>
	<link rel="stylesheet" type="text/css" href="../static/css/reset.css">
	<link rel="stylesheet" type="text/css" href="../static/css/index.css">
</head>
<style>
	#cnzz_stat_icon_1259441963{
	  display:block;
	  width:0;
	  height:0;
	  overflow:hidden;
	}
	.blackfilter {
	  background: #000;
	  -webkit-filter: blur(4px) contrast(10);
			  filter: blur(4px) contrast(10);
	}
	.mix-diff {
	  mix-blend-mode: difference;
	  z-index: 1;
	}
	.blackbg {
	  background: #000;
	}
	.flex-wrap {
	  display: flex;
	}
</style>
<body>
<div class="container">
	<!-- nike -->
	<section id="bubbly" class="code-wrap cf">
	<div class="css-live-wrap">
		<summary>Nike图标</summary>
		<hgroup id="nike">
			NIKE
		</hgroup>
	</div>
	<style class="code" contenteditable=true>
	/* 这里可以直接编辑，并且生效当前页面 */
		
	#nike {
		position: absolute;
		top:50%;
		left: 50%;
		transform:translate(-50%,-50%);
		width: 470px; height: 200px;
		border: 1px solid gray;
		overflow: hidden;
		font-family: Arial, sans-serif;
		font-size: 40px;
		line-height: 300px;
		text-indent: 350px;
		z-index: 3;
	}
	#nike:before {
		content: "";
		position: absolute;
		top: -250px;
		left:190px;
		width: 150px;
		height: 550px;
		background: black;
		border-top-left-radius: 60px 110px;
		border-top-right-radius: 130px 220px;
		transform: rotate(-113deg);
		z-index: 1;
	}
	#nike:after {
		content: "";
		position: absolute;
		top: -235px;
		left: 220px;
		width: 120px;
		height: 500px;
		background: black;
		border-top-left-radius: 60px 110px;
		border-top-right-radius: 130px 220px;
		background: white;
		transform: rotate(-104deg);
		z-index: 2;
	}
	</style>
	</section>
	
	<!-- 单标签实现抖音LOGO -->
	<section id="tiktok-logo" class="code-wrap cf">
	  <div class="css-live-wrap">
	    <summary>单标签实现抖音LOGO</summary>
	    <summary>借助了两个伪元素实现了整体结构</summary>
	    <summary>借助了 shadow 生成另外两层整体阴影</summary>
	    <div class="tiktok-logo"></div>
	  </div>
	  <style class="code" contenteditable=true>
	    .tiktok-logo {
	      position: relative;
	      width: 37px;
	      height: 218px;
	      margin: 100px auto;
	      z-index: 1;
	      background: #fff;
	      filter:drop-shadow(-10px -10px 0 #24f6f0) contrast(150%) brightness(110%);
	      box-shadow: 11.6px 10px 0 0 #fe2d52;
	      z-index: 10;
	      top: -60px;
	    }
	    .tiktok-logo::before {
	      content: "";
	      position: absolute;
	      width: 100px;
	      height: 100px;
	      border: 37px solid #fff;
	      border-top: 37px solid transparent;
	      border-radius: 50%;
	      top: 123px;
	      left: -137px;
	      transform: rotate(45deg);
	      filter: drop-shadow(16px 0px 0 #fe2d52);
	    }
	      
	    .tiktok-logo::after {
	      content: "";
	      position: absolute;
	      width: 140px;
	      height: 140px;
	      border: 30px solid #fff;
	      border-right: 30px solid transparent;
	      border-top: 30px solid transparent;
	      border-left: 30px solid transparent;
	      top: -100px;
	      right: -172px;
	      border-radius: 100%;
	      transform: rotate(45deg);
	      z-index: -10;
	      filter:drop-shadow(14px 0 0 #fe2d52);
	    }
	  
	  </style>
	</section>
	
	<!-- TaiChi 利用border、transparent、旋转实现太极图 -->
	<section id="TaiChi" class="code-wrap cf">
	  <div class="css-live-wrap">
	    <summary>太极图（单标签实现）</summary>
	    <summary>利用 box-shadow 实现</summary>
	    <hgroup class="TaiChi">
	      <h1></h1>
	    </hgroup>
	  </div>
	  <style class="code" contenteditable=true>
	    .TaiChi{
	      position: absolute;
	      top: 50%;left: 50%;
	      width: 200px;height: 200px;
	      transform: translate(-50%, -50%);
	      box-shadow:0 0 2px #ddd;
	      border-radius:50%;
	      background-image:
	        radial-gradient(#000 12.5px, transparent 12.5px),
	        radial-gradient(#fff 12.5px, transparent 12.5px),
	        radial-gradient(#fff 50px, transparent 50px),
	        radial-gradient(#000 50px, transparent 50px),
	        linear-gradient(90deg,#000 100px, #fff 100px);
	      background-position:center 50px,center -50px,center 50px,center -50px,0 0;
	    }
	  </style>
	</section>
	
	<!-- captainAmerica 利用渐变实现美队盾牌 -->
	<section id="captainAmerica" class="code-wrap cf">
	  <div class="css-live-wrap">
	    <summary>美队盾牌（单标签实现）</summary>
	    <summary>利用 渐变 实现</summary>
	    <hgroup class="captainAmerica">
	    </hgroup>
	  </div>
	  <style class="code" contenteditable=true>
	    .captainAmerica{
	      position: absolute;
	      top: 50%;left: 50%;
	      width: 200px;height: 200px;
	      transform: translate(-50%, -50%);
	      background:
	        linear-gradient(45deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%),
	        linear-gradient(-45deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%),
	        linear-gradient(to right, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%),
	        linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%),
	        radial-gradient(ellipse at center, #0033b0 20%, #ce0021 20%, #ce0021 35%, #eee 35%, #eee 55%, #ce0021 55%);
	      border-radius: 50%;
	      box-shadow: 0 3px 0 #a20917,0 4px 2px 2px #eee;
	    }
	    .captainAmerica::before{
	      content: '★';
	      position:absolute;
	      top: 50%;left: 50%;
	      transform: translate(-50%, -50%);
	      margin-left:-3px;
	      width: 50px;height:50px;
	      font-family: simsun,Tahoma,Helvetica,Arial,SimHei,sans-serif;
	      line-height: 47px;
	      z-index: 1;
	      border-radius: 50%;
	      font-size: 55px;
	      color: #fff;
	      text-align:center;
	      text-shadow: 2px 1px 2px #777;
	    }
	  </style>
	</section>
	
	<!-- button 利用渐变、阴影实现纽扣 -->
	<section id="button" class="code-wrap cf">
	  <div class="css-live-wrap">
	    <summary>纽扣（单标签实现）</summary>
	    <summary>利用 渐变、阴影 实现</summary>
	    <hgroup class="button">
	    </hgroup>
	  </div>
	  <style class="code" contenteditable=true>
	    .button{
	      position: absolute;
	      top: 50%;left: 50%;
	      transform: translate(-50%, -50%);
	      width: 180px;
	      height: 180px;
	      background: #87ceeb;
	      border-radius: 50%;
	      box-shadow:
	        inset 0 5px 5px #87ceeb,
	        inset 0 17px 5px rgba(255,255,255,0.7),
	        inset 0 -3px 3px rgba(255,255,255,0.3),
	        inset 0 -10px 10px rgba(0,0,0,0.3),
	        inset 0 -15px 10px #45b3e0,
	        0 7px 10px rgba(0,0,0,0.3);
	    }
	    .button::before{
	      content: '';
	      position:absolute;
	      top: 50%;left: 50%;
	      width: 110px;height: 106px;
	      margin-left: -55px;margin-top: -55px;
	      background-image:
	        radial-gradient(circle at 38px 38px, #333 10px, transparent 10px),
	        radial-gradient(circle at 73px 73px, #333 10px, transparent 10px),
	        radial-gradient(circle at 38px 73px, #333 10px, transparent 10px),
	        radial-gradient(circle at 73px 38px, #333 10px, transparent 10px);
	      border-radius: 50%;
	      border-top: 1px solid rgba(0,0,0,0.6);
	      border-bottom: 1px solid rgba(255,255,255,0.6);
	      box-shadow:
	        inset 0 20px 2px rgba(255,255,255,0.3),
	        3px -15px 7px -4px rgba(0,0,0,0.3),
	        0 -14px 10px 5px #45b3e0,
	        0 2px 5px 5px #87ceeb,
	        0 10px 5px 5px rgba(255,255,255,0.6);
	    }
	    .button::after{
	      content: '';
	      position:absolute;
	      top: 50%;left: 50%;
	      width: 50px;height: 50px;
	      margin-left: -25px;
	      margin-top: -23px;
	      background-image:
	        linear-gradient(to right, transparent 35%, #000080 35%, #4682b4 40%, #000080 45%, #4682b4 50%, #000080 55%, #4682b4 60%, #000080 65%, transparent 65%),
	        linear-gradient(to bottom, transparent 35%, #000080 35%, #4682b4 40%, #000080 45%, #4682b4 50%, #000080 55%, #4682b4 60%, #000080 65%, transparent 65%);
	      border-radius: 50%;
	      transform: rotate(45deg);
	    }
	  </style>
	</section>
	
	<!-- chrome 利用渐变实现 chrome 浏览器图标 -->
	<section id="chrome" class="code-wrap cf">
	  <div class="css-live-wrap">
	    <summary>Chrome（单标签实现）</summary>
	    <summary>利用渐变实现</summary>
	    <hgroup class="Chrome">
	      <h1></h1>
	    </hgroup>
	  </div>
	  <style class="code" contenteditable=true>
	    .Chrome{
	      position: absolute;
	      top: 50%;left: 50%;
	      width: 180px;height: 180px;
	      transform: translate(-50%, -50%);
	      box-shadow:0 0px 4px #999,0 0 2px #ddd inset;
	      border-radius:50%;
	      background-image:
	        radial-gradient(#4FACF5 0%,#2196F3 28%, transparent 28%),
	        radial-gradient(#fff 33%, transparent 33%),
	        linear-gradient(-50deg,#FFEB3B 34%, transparent 34%),
	        linear-gradient(60deg,#4CAF50 33%, transparent 33%),
	        linear-gradient(180deg,#FF756B 0%, #F44336 30%, transparent 30%),
	        linear-gradient(-120deg,#FFEB3B 40%, transparent 40%),
	        linear-gradient(-60deg,#FFEB3B 30%, transparent 30%),
	        linear-gradient(0deg,#4CAF50 45%, transparent 45%),
	        linear-gradient(60deg,#4CAF50 30%, transparent 30%),
	        linear-gradient(120deg,#F44336 50%, transparent 50%),
	        linear-gradient(180deg,#F44336 30%, transparent 30%);
	      background-position:0 0;
	    }
	  </style>
	</section>
	
	<!-- Opera 利用渐变实现 Opera 浏览器图标 -->
	<section id="Opera" class="code-wrap cf">
	  <div class="css-live-wrap">
	    <summary>Opera（单标签实现）</summary>
	    <summary>利用渐变、实现</summary>
	    <hgroup class="Opera">
	      <h1></h1>
	    </hgroup>
	  </div>
	  <style class="code" contenteditable=true>
	    .Opera{
	      position: absolute;
	      top: 50%;left: 50%;
	      width: 170px;height: 200px;
	      transform: translate(-50%, -50%);
	      border-radius:50%;
	      box-shadow:0 2px 4px #333;
	      background-image:
	        linear-gradient(rgb(254, 135, 138) 0%, rgb(231, 22, 22) 50%, rgb(128, 0, 0) 85%, rgb(184, 3, 4) 100%);
	    }
	    .Opera:after{
	      content:"";
	      position: absolute;
	      top:50%;left:50%;
	      width: 60px;height: 180px;
	      transform: translate(-50%, -50%);
	      border-radius:50%;
	      background:#fff;
	    }
	    .Opera:before{
	      content:"";
	      position: absolute;
	      top:50%;left:50%;
	      width: 72px;height: 185px;
	      transform: translate(-50%, -50%);
	      border-radius:50%;
	      background:rgba(0,0,0,.4);
	    }
	  </style>
	</section>
	
	<!-- IE 利用渐变实现 IE 浏览器图标 -->
	<section id="IE" class="code-wrap cf">
	  <div class="css-live-wrap">
	    <summary>IE（单标签实现）</summary>
	    <summary>利用渐变、多重阴影实现</summary>
	    <hgroup class="IE">
	      <h1></h1>
	    </hgroup>
	  </div>
	  <style class="code" contenteditable=true>
	    .IE{
	      position: absolute;
	      top: 50%;left: 50%;
	      width:200px; height:200px;
	      transform: translate(-50%, -50%);
	      border-radius:50%;
	      /* box-shadow:1px 2px 1px #ddd; */
	      background-image:
	         radial-gradient(#fff 38%, transparent 38%),
	         radial-gradient(#09C 0%, #09C 100%);
	
	    }
	    .IE:before{
	      content: "";
	      width:285px;
	      height:122px;
	      background:none;
	      border-radius:100%;
	      position:absolute;
	      top:33px;
	      left:-45px;
	      margin:auto;
	      box-shadow:
	        inset 0 12px 0 13px  #09c,
	        -35px -8px 0 -5px #fff;
	      transform: rotate(-35deg);
	    }
	    .IE:after {
	      content: "";
	      width: 120px;
	      height: 25px;
	      background: #09c;
	      position: absolute;
	      top: 80px;
	      left: 0;
	      right: 0;
	      margin: auto;
	      box-shadow: 50px 23px 0 -2px #fff
	    }
	  </style>
	</section>
	
	<!-- safari 利用渐变实现 safari 浏览器图标 -->
	<section id="safari" class="code-wrap cf">
	  <div class="css-live-wrap">
	    <summary>safari（单标签实现）</summary>
	    <summary>利用渐变、border、旋转实现</summary>
	    <hgroup class="safari">
	      <h1></h1>
	    </hgroup>
	  </div>
	  <style class="code" contenteditable=true>
	    .safari{
	      position: absolute;
	      top: 50%;left: 50%;
	      width:200px; height:200px;
	      transform: translate(-50%, -50%);
	      border-radius:50%;
	      border:5px solid #E8E8E8;
	      box-shadow:
	        -1px 3px 1px 2px #999,
	        -1px 3px 1px 2px #999 inset;
	      background-image:
	        radial-gradient(transparent 30%,#fff 30%,#fff 34%, transparent 34%),
	        linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
	        linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
	        linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
	        linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
	        linear-gradient(#1DE3FF 0%, #1F52EF 100%);
	      background-size: 50% 50%,20px 2px,20px 2px,2px 20px,2px 20px,100%,100%;
	      background-repeat:no-repeat;
	      background-position:center center, 175px center,5px center,center 175px,center 5px,0 0;
	
	    }
	    .safari::before{
	      content:"";
	      position: absolute;
	      top: 10px;left: 50%;
	      border-radius:10px;
	      /* width:20px; height:80px; */
	      border-bottom:100px solid rgba(255,255,255,.9);
	      border-left:10px solid transparent;
	      border-right:10px solid transparent;
	      transform-origin:center 90px;
	      z-index:-1;
	      transform:translate(-50%, 0%) rotate(40deg);
	    }
	    .safari::after{
	      content:"";
	      position: absolute;
	      top: 10px;left: 50%;
	      border-radius:10px;
	      /* width:20px; height:80px; */
	      border-bottom:100px solid rgba(255,0,0,.9);
	      border-left:10px solid transparent;
	      border-right:10px solid transparent;
	      transform-origin:center 90px;
	      transform:translate(-50%, 0%) rotate(220deg);
	    }
	    .safari:hover::before{
	        transition:transform 1s;
	        transform:translate(-50%, 0%) rotate(70deg);
	    }
	    .safari:hover::after{
	        transition:transform 1s;
	        transform:translate(-50%, 0%) rotate(250deg);
	    }
	  </style>
	</section>
	
	<!-- sogou 利用渐变实现 sogou 浏览器图标 -->
	<section id="sogou" class="code-wrap cf">
	  <div class="css-live-wrap">
	    <summary>sogou（单标签实现）</summary>
	    <summary>利用文字、阴影实现</summary>
	    <hgroup class="sogou">
	      <h1></h1>
	    </hgroup>
	  </div>
	  <style class="code" contenteditable=true>
	    .sogou{
	      position: absolute;
	      top: 50%;left: 50%;
	      width: 200px;height:200px;
	      transform: translate(-50%, -50%);
	      border:8px solid #fff;
	      box-shadow: 2px 1px 2px 2px #ccc;
	      border-radius:50%;
	      overflow:hidden;
	      background:#4DA0ED;
	    }
	    .sogou::before{
	      content:"S";
	      position: absolute;
	      line-height: 185px;
	      top:0;left:0;right:0;bottom:0;
	      color:#fff;
	      font-weight:600;
	      font-size:320px;
	      text-align:center;
	      text-shadow:
	        3px 0 0px #337FC4,
	        -5px 0px 0px #CDE4F0,
	        0px 8px 0px #387FBF;
	      transform:rotate(2deg);
	      z-index:-10;
	      overflow:hidden;
	    }
	  </style>
	</section>
	
	<!-- firefox 利用渐变实现 firefox 浏览器图标 -->
	<section id="firefox" class="code-wrap cf">
	  <div class="css-live-wrap">
	    <summary>firefox（单标签实现）</summary>
	    <summary>利用多重阴影实现</summary>
	    <hgroup class="firefox">
	    </hgroup>
	  </div>
	  <style class="code" contenteditable=true>
	    .firefox{
	      position: absolute;
	      top: 50%;left: 50%;
	      width: 200px;height:200px;
	      transform: translate(-50%, -50%);
	      border:8px solid #eee;
	      border-radius:50%;
	      overflow:hidden;
	      background:#F48D00;
	      box-shadow:0 0 2px 0 #999;
	    }
	    .firefox::before{
	      content: "";
	      width: 46px;
	      height: 46px;
	      background: #A4DFEF;
	      border-radius: 100%;
	      position: absolute;
	      top: 90px;
	      left: 50px;
	      margin: auto;
	      border: 1px solid #A4DFEF;
	      box-shadow:
	        -10px 0 0 5px rgba(164, 223, 239, .2),
	        16px -60px 0 8px rgba(164, 223, 239, .2),
	        -30px -50px 0 8px #F48D00,
	        25px -38px 0 0px #A4DFEF,
	        -30px -30px 0 12px #F48D00,
	        15px -60px 0 8px #A4DFEF,
	        33px 31px 0 -15px #A4DFEF,
	        30px 17px 0 -13px #F48D00,
	        20px -10px 0 0px #A4DFEF,
	        -8px -0px 0 19px #F48D00,
	        30px 17px 0 0px #A4DFEF,
	        24px 30px 0 15px #F48D00,
	        20px -6px 0 28px #A4DFEF,
	        45px 10px 0 35px #F48D00,
	        -5px -57px 0 8px #F48D00,
	        20px -23px 0 45px #A4DFEF,
	        -5px -80px 0 8px #A4DFEF,
	        -30px -70px 0 8px #F48D00,
	        -5px -57px 0 8px #F48D00,
	        43px -11px 0 55px #F48D00,
	        22px -39px 0 55px #A4DFEF;
	    }
	    .firefox::after{
	      content: "";
	      width: 0px;
	      height: 2px;
	      background: linear-gradient(90deg,#F48D00 75% ,#333 30% );
	      background-size: 35px 35px;
	      position: absolute;
	      top: 50px;
	      left: 73px;
	      margin: auto;
	      border: solid;
	      border-width: 12px 0 15px 30px;
	      border-color: #A4DFEF #fff #A4DFEF transparent;
	      box-shadow: inset 0px 0 0 50px #333;
	    }
	  </style>
	</section>
	
	<!-- Facebook Icon -->
	<section id="firefox" class="code-wrap cf">
	  <div class="css-live-wrap">
	    <summary>Facebook Icon</summary>
	    <hgroup id="facebook-icon">
	    </hgroup>
	  </div>
	  <style class="code" contenteditable=true>
	    #facebook-icon {
		  position: absolute;
		  top: 50%;left: 50%;
		  width: 200px;height:200px;
		  transform: translate(-50%, -50%);
	      background: red;
	      text-indent: -999em;
	      width: 100px;
	      height: 110px;
	      border-radius: 5px;
	      position: relative;
	      overflow: hidden;
	      border: 15px solid red;
	      border-bottom: 0;
	    }
	    #facebook-icon::before {
	      content: "/20";
	      position: absolute;
	      background: red;
	      width: 40px;
	      height: 90px;
	      bottom: -30px;
	      right: -37px;
	      border: 20px solid #eee;
	      border-radius: 25px;
	    }
	    #facebook-icon::after {
	      content: "/20";
	      position: absolute;
	      width: 55px;
	      top: 50px;
	      height: 20px;
	      background: #eee;
	      right: 5px;
	    }
	  </style>
	</section>
</div>
</body>
</html>
